{% extends 'base/base.html' %}

{% block css %}
    <link href="/static/css/plugins/toastr/toastr.min.css" rel="stylesheet">
{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-lg-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">User</span>
                    <h5>用户数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{{ users }}</h1>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">Host</span>
                    <h5>主机数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{{ servers }}</h1>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">IDC</span>
                    <h5>机房数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{{ idcs }}</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-danger pull-right">Menory</span>
                    <h5>内存</h5>
                </div>
                <div class="ibox-content">
                    <h5 class="no-margins" id="total_mem">内存大小：{{ mem.total_mem }}GB</h5>
                    <h5 class="no-margins" id="free_mem">内存使用率：{{ mem.percent_mem }}%</h5>
                </div>
            </div>
        </div>
         <div class="col-lg-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-warning pull-right">System</span>
                    <h5>系统</h5>
                </div>
                <div class="ibox-content">
                    <h5 class="no-margins" id="cpu_usage">CPU使用率：{{ sys.cpu_usage }}%</h5>
                    <h5 class="no-margins" id="iowait">磁盘IO：{{ sys.iowait }}</h5>
                </div>
            </div>
        </div>
         <div class="col-lg-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label pull-right">Process</span>
                    <h5>进程</h5>
                </div>
                <div class="ibox-content">
                    <h5 class="no-margins" id="cpu_usage">Redis：{{ proc.redis }}</h5>
                    <h5 class="no-margins" id="iowait">MySQL：{{ proc.mysql }}</h5>
                </div>
            </div>
         </div>
    </div>

{% endblock %}

{% block base_script %}
    <script src="/static/js/plugins/toastr/toastr.min.js"></script>
{% endblock %}

{% block script %}
<script>

     function get_info () {
        $.post({% url 'index' %}, {}, function (data) {
            $('#free_mem').text('内存使用率：' + data.percent_mem  + '%');
            $('#cpu_usage').text('CPU使用率：' + data.cpu_usage  + '%');
            $('#iowait').text('磁盘IO：' + data.iowait);
        });
     }

     function cront( ) {　
        get_info()
        setTimeout("cront()", 10000);
     }

    $(document).ready(function() {
        setTimeout(function() {
            toastr.options = {
                closeButton: true,
                progressBar: true,
                showMethod: 'slideDown',
                timeOut: 4000
            };
            toastr.success('ITAdmin运维管理平台', '欢迎使用');

        }, 1300);

        cront();

    });
</script>
{% endblock %}
